<script setup>
import { getImg } from '@/utils/index.js'
import { ref } from 'vue'
defineOptions({ name: 'CaseList' })
const caseList = ref([
    {
        url: 'case01.png',
        h2: '金融行业',
        text1:
            '中国银联、中国农业银行、中国邮政储蓄银行、中国银行、中国工商银行、交通银行、浦发银行、哈银消费金融公司、51信用卡',
        text2: '橙金融',
        text3:
            '橙券为客户搭建营销活动，银行的手机银行及网银用户可通过参与活动，获得不同频次抽奖礼券，凭抽奖礼券随机抽取话费、流量、星巴克等奖品，打造具有生动营销力的传播。'
    },
    {
        url: 'case02.png',
        h2: '互联网行业',
        text1: '腾讯、京东PLUS、支付宝、搜狐邮箱、好时巧克力、乐麦',
        text2: '橙营销',
        text3:
            '橙券为品牌线上商城旗舰店提供权益商品和技术支撑，多种选择，稳定货源支持，充分调动用户参与积极性，与用户形成良好互动，拉新促销，驱动企业业绩提升'
    },
    {
        url: 'case03.png',
        h2: '保险行业',
        text1: '中邮人寿、中德安联人寿、壹钱包',
        text2: '橙营销、橙金融',
        text3:
            '橙券，为保险行业客户策划精准有冲击力的营销活动，同时兼顾品牌信息传递和用户习惯的完美平衡，创意提供多面值话费、卡券产品等，覆盖更广泛的目标人群，实现流量快速转换'
    },
    {
        url: 'case04.png',
        h2: '通信行业',
        text1: '中国联通',
        text2: '橙积分',
        text3:
            '橙券充分整合360°客户视图，为联通的积分商城提供网票网、货拉拉、e袋洗等优质权益商品，并保障源源不断上新。用户在线兑换心仪商品，丰富且实用，有效提升用户个性化体验，充分发挥积分的价值。'
    },
    {
        url: 'case05.png',
        h2: '汽车行业',
        text1: '重庆长安汽车',
        text2: '橙积分',
        text3:
            '橙券，是长安商城积分兑换业务的提供商之一，为商城用户提供中石化加油卡充值与话费充值服务，让用户有了新的兑换选择，有助于用户留存，加强用户对品牌的友好度，快速提升品牌曝光度和流量。'
    },
    {
        url: 'case06.png',
        h2: '传媒行业',
        text1: '华数传媒、中科数创、瑞安日报、山东广播电视台',
        text2: '橙营销',
        text3:
            '橙券助力媒体行业深度营销，以数据产品的复合运用，实现程序化精准营销服务，根据品牌形象定制不同的视觉风格，形成具有互动性的曝光传播，帮助企业实现1'
    }
])
</script>

<template>
    <div class="case-list">
        <div class="case-list_detail" v-for="item in caseList" :key="item.url">
            <img :src="getImg(item.url)" alt="">
            <div class="detail-text">
                <h2>{{ item.h2 }}</h2>
                <ul class="mg30">
                    <li>
                        <h3>合作对象</h3>
                        <p>{{ item.text1 }}</p>
                    </li>
                    <li class="mg50">
                        <h3>品牌支持</h3>
                        <p>{{ item.text2 }}</p>
                    </li>
                    <li>
                        <h3>服务内容</h3>
                        <p>{{ item.text3 }}</p>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</template>



<style lang="scss" scoped>
.case-list {
    padding-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .case-list_detail {
        padding-top: 70px;
        padding-bottom: 50px;
        width: 1200px;
        display: flex;
        border-bottom: 1px solid #f4f4f4;

        .detail-text {
            padding-top: 15px;
            margin-left: 75px;

            h2 {
                margin-bottom: 50px;
                width: 696px;
                height: 52px;
                background-color: #f8f8f8;
                padding-left: 25px;
                font-size: 22px;
                color: #ff7200;
                line-height: 52px;

            }

            h3 {
                padding-bottom: 10px;
                position: relative;
                font-size: 20px;
                line-height: 18px;
                color: #666;
                padding-left: 10px;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0px;
                    top: 2px;
                    height: 16px;
                    width: 3px;
                    background-color: #ff7200;
                }
            }


            p {
                font-size: 14px;
                color: #666;
                line-height: 24px;
                letter-spacing: 0px;
            }
        }
    }
}

.mg50 {
    margin: 50px 0;
}

.mg30 {
    margin: 0 30px;
}
</style>